<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <father ref="fRef"></father>
    <button @click="show">查看</button>
  </div>

  <script src="./libs/vue.js"></script>
  <script>
    // 注册父组件
    Vue.component('father', {
      template: `
        <div>
          <div>这是父组件的内容</div>
          <ul>
            <li><son v-bind:msg="message" v-on:suibianqude="handleReceive"></son></li>
          </ul>
          <div>
            {{ receive }}
          </div>
        </div>
      `,
      // 局部组件注册（子组件）
      components: {
        son: {
          template: `
            <div>
              这是子组件的内容 -- {{ msg }}
              <div>
                <button @click="send">向父组件发送数据</button>  
              </div>
            </div>
          `,
          props: {
            msg: {
              type: String
            }
          },
          methods: {
            send() {
              // 触发在父组件中绑定的事件，并传递数据
              this.$emit('suibianqude', '从子组件中传递到父组件的数据')
            }
          }
        }
      },
      data() {
        return {
          message: '这是在父组件中定义的数据',
          receive: '用于接收子组件传递的数据'
        }
      },
      methods: {
        handleReceive(msg) {
          this.receive = msg
        }
      }
    })

    // // 全局注册 son 组件
    // Vue.component('son', {
    //   template: `
    //     <div>
    //       这是子组件的内容
    //     </div>
    //   `
    // })

    const vm = new Vue({
      el: '#app',
      methods: {
        show() {
          console.log(this.$refs)
        }
      }
    })
  </script>
</body>
</html>